<template>
  <div id="weather">
    <div class="head">全国城市天气查询</div>
    <div class="parent" id="A">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label>
          <el-input v-model="form.city" placeholder="请输入要查询的城市"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click.enter="sumbitForm()">确认</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <div class="one">
        <div class="days">
          <table>
            <thead>
              <tr>
                <td>时间</td>
                <td>日出日落时间</td>
                <td>温度</td>
                <td>天气</td>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </div>
      <div class="one" id="charts"></div>
    </div>
  </div>
</template>
<script type="text/javascript">
import axios from "@/utils/axios";
export default {
  data() {
    return {
      dataone: {},
      form: {
        city: ""
      }
    };
  },
  created() {},
  mounted() {},
  methods: {
    one(title, time, high, low) {
      var myChart = echarts.init(document.getElementById("charts"));

      var option = {
        title: {
          text: "折线图堆叠"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          textStyle: {
            color: "#FFFFFF"
          },
          data: ["最高温度", "最低温度"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          axisLabel: {
            color: "#FFFFFF"
          },
          type: "category",
          boundaryGap: false,
          data: time
        },
        yAxis: {
          axisLabel: {
            color: "#FFFFFF"
          },
          type: "value"
        },
        series: [
          {
            name: "最高温度",
            type: "line",

            data: high
          },
          {
            name: "最低温度",
            type: "line",

            data: low
          }
        ]
      };
      myChart.setOption(option);
    },
    sumbitForm(model) {
      // console.log(this.form.city);
      // let city = Qs.stringify({ city: this.form.city });

      axios("/Weather?city=" + this.form.city + "")
        .then(res => {
          $("tbody").empty();
          res = JSON.parse(res.data.data);
          var city = res.result.result.city;
          var daily = res.result.result.daily;
          console.log(daily);
          daily.forEach(function(item) {
            var newTr = $(
              `<tr> 
                <td>${item.date}</td>
            <td>${item.sunrise}</td>
            <td>${item.night.templow}℃~${item.day.temphigh}℃</td>
            <td>${
              item.night.weather == item.day.weather
                ? item.night.weather
                : item.night.weather + "转" + item.day.weather
            }</td>   
            </tr>`
            );
            $(".days tbody").append(newTr);
          });
          var title = city + "7天温度曲线";
          var time = daily.map(function(item) {
            return item.date;
          });
          var high = daily.map(function(item) {
            return item.day.temphigh;
          });
          var low = daily.map(function(item) {
            return item.night.templow;
          });
          this.$options.methods.one(title, time, high, low);
        })

        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>
<style >
#weather {
  height: calc(100vh - 50px);
  background-color: #2c343c;
}
.head {
  height: 20%;
  color: aliceblue;
  background-color: #2c343c;
  font-size: 50px;
  font-family: YouYuan;
  text-align: center;
  line-height: 130px;
}
/* .parent {
  float: left;
} */
#A {
  margin-right: 30px;
}
.days table {
  border: 1px solid #444;
  border-collapse: collapse;
  width: 100%;
  line-height: 25px;
  margin: 0 auto;
}
td,
th {
  border: 1px solid #444;
  padding: 5px;
  text-align: center;
  color: white;
}
.one {
  float: left;
  width: 50%;
}
#charts {
  width: 50%;
  height: 300px;
}
</style>